<template>
  <div>
    <div class="mask" @click.self="$emit('hide')">
      <div class="con">
        <!-- 展示 -->
        <h3 class="specs">{{ obj.specsname }}</h3>
        <div class="option">
          <span
            v-for="(item, index) in obj.specsattr"
            @click="n = index"
            :key="item"
            :class="index == n ? 'active' : ''"
            >{{ item }}</span
          >
        </div>
        <button @click="addCard">加入购物车</button>      
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { addShop } from "../../../http/http";

export default {
  props: ["obj"],
  data() {
    return {
      n: 0,
    };
  },
  methods: {
    addCard() {
      addShop({
        uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        goodsid: this.obj.id,
        num: 1,
      }).then((res) => {
        // console.log(res);
        if (res.data.code == 200) {
          alert("添加成功");
        } else {
          alert(res.data.msg);
        }
        this.$emit("hide");
      });
    },
  },
};
</script>

<style scoped>
.mask {
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
}
.con {
  min-height: 50%;
  max-height: 80%;
  background: #fff;
  width: 100vw;
  position: absolute;
  left: 0;
  bottom: 0;
}
.specs {
  font-size: 0.5rem;
  font-weight: 900;
}
.option {
  overflow: hidden;
}
.option span {
  float: left;
  margin: 0.2rem;
  padding: 0.2rem 0.3rem;
  background: #ccc;
  border-radius: 0.1rem;
}
.option .active {
  background: #ff4400;
  color: #fff;
}
</style>